<style lang="less">
  .insurance-statistics {
    .statics {
      margin-top: 40px;
      .bg-purple {
        background: #f2f2f2;
        .el-row {
          margin-bottom: 5px;
        }
        .bg-purple-header {
          font-size: 16px;
        }
      }
      .grid-content {
        border: 1px solid #d1dbe5;
        border-radius: 4px;
        min-height: 155px;
        padding: 10px 10px 0px 10px;
      }
      label {
        width: 150px;
        text-align: left;
        vertical-align: middle;
        float: left;
        line-height: 19px;
        height: 19px;
        box-sizing: border-box;
      }
    }
  }
</style>

<template>
  <div class="insurance-statistics">
    <search-bar moreDisplay>
      <el-row>
        <el-col :span="8">
          <el-form-item label="投保订单编号">
            <el-input v-model="condition['LIKE_truckLoadNumber']" placeholder="请输入投保订单编号"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="16">
          <el-form-item label="投保日期">
            <el-col :span="10">
              <el-radio-group v-model="radio">
                <el-radio-button label="lastweek">上周</el-radio-button>
                <el-radio-button label="week">本周</el-radio-button>
                <el-radio-button label="month">本月</el-radio-button>
                <el-radio-button label="quarter">本季度</el-radio-button>
              </el-radio-group>
            </el-col>
            <el-col :span="14">
              <el-date-picker
                v-model="daterange"
                type="daterange"
                placeholder="选择日期范围">
              </el-date-picker>
            </el-col>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8">
          <el-form-item label="被投保人名称">
            <el-input v-model="condition['LIKE_startContactName']" placeholder="请输入被投保人名称"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="货物名称">
            <el-input v-model="condition['LIKE_cargoName']" placeholder="请输入货物名称"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
    </search-bar>
    <el-col :span="24" style="padding-bottom: 10px;border-bottom: 1px solid #d1dbe5;">
      <el-button type="primary">导出投保统计</el-button>
      <el-button type="primary" style="float: right" @click="reset">重置</el-button>
      <el-button type="primary" style="float: right;margin-right: 10px" @click="search">查询</el-button>
    </el-col>

    <div>
      <el-col :span="12" style="padding-top: 10px;">
        <el-breadcrumb>
          <el-breadcrumb-item>投保统计</el-breadcrumb-item>
        </el-breadcrumb>
        <el-row :gutter="10" style="margin-bottom: 10px;" class="statics">
          <el-col :span="8">
            <div class="grid-content bg-purple">
              <el-row>
                <el-col :span="12">总订单数：</el-col>
                <el-col :span="12">{{statistics.totalOrders}}票</el-col>
              </el-row>
              <el-row>
                <el-col :span="12">投保订单数：</el-col>
                <el-col :span="12">{{statistics.insureOrders}}票</el-col>
              </el-row>
              <el-row>
                <el-col :span="12">投保订单占比：</el-col>
                <el-col :span="12" v-if="null!=statistics.totalOrders&&statistics.totalOrders>0">
                  {{(statistics.insureOrders / statistics.totalOrders).toFixed(2)}}
                </el-col>
                %
              </el-row>
              <el-row>
                <el-col :span="12">保价服务取消率：</el-col>
                <el-col :span="12" v-if="null!=statistics.totalOrders&&statistics.totalOrders>0">
                  {{(1 - statistics.insureOrders / statistics.totalOrders).toFixed(2)}}%
                </el-col>
              </el-row>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="grid-content bg-purple">
              <el-row>
                <el-col :span="14">保价金额：</el-col>
                <el-col :span="10">{{statistics.insurePrice}}万元</el-col>
              </el-row>
              <el-row>
                <el-col :span="14">投保订单保费：</el-col>
                <el-col :span="10">{{statistics.insureServicePrice}}元</el-col>
              </el-row>
              <el-row>
                <el-col :span="14">平均投保费率：</el-col>
                <el-col :span="10" v-if="null!=statistics.insurePrice&&statistics.insurePrice>0">
                  {{(statistics.insureServicePrice / statistics.insurePrice).toFixed(2)}}%
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="14">投保订单保险成本：</el-col>
                <el-col :span="10">{{statistics.insureDegressionPrice}}元</el-col>
              </el-row>
              <el-row>
                <el-col :span="14">单均毛利润：</el-col>
                <el-col :span="10" v-if="null!=statistics.insureOrders&&statistics.insureOrders>0">
                  {{(statistics.insureServicePrice - statistics.insureDegressionPrice) / statistics.insureOrders}}元
                </el-col>
              </el-row>
            </div>
          </el-col>
        </el-row>
      </el-col>
      <el-col :span="12" style="padding-top: 10px;">
        <el-breadcrumb>
          <el-breadcrumb-item>最近15天投保关键指数趋势图</el-breadcrumb-item>
        </el-breadcrumb>
        <ve-line :data="chartData" :settings="chartSettings" height="250px" :grid="{top: 40,bottom: 10}"></ve-line>
      </el-col>
    </div>
    <el-table :data="truckLoadOrders" v-loading="listLoading" highlight-current-row border style="width: 100%">
      <el-table-column type="index" width="50">
      </el-table-column>
      <el-table-column prop="truckLoadNumber" label="投保订单编号" width="130px">
        <template slot-scope="scope">
          <a style="cursor: pointer;text-decoration:underline;color: #20a0ff"
             @click="openDialog(scope.row,true)">
            {{scope.row.truckLoadNumber}}
          </a>
        </template>
      </el-table-column>
      <el-table-column prop="createdDate" label="下单日期" width="150px"></el-table-column>
      <el-table-column prop="insureDate" label="投保日期" width="150px"></el-table-column>
      <el-table-column prop="insurePrice" label="保价金额(万元)">
        <template slot-scope="scope">
          {{(scope.row.insurePrice / 10000).toFixed(2)}}
        </template>
      </el-table-column>
      <el-table-column prop="insureServicePrice" label="投保订单保费(元)"></el-table-column>
      <el-table-column prop="insureDegressionPrice" label="保费成本(元)"></el-table-column>
      <el-table-column prop="startContactName" label="被保人名称"></el-table-column>
      <el-table-column prop="startContactAddressNames" label="起始地"></el-table-column>
      <el-table-column prop="endContactAddressNames" label="目的地"></el-table-column>
      <el-table-column prop="cargoName" width="60" label="货物名称">
        <template slot-scope="scope">
          {{scope.row.cargoTypeName}} | {{scope.row.cargoName}}
        </template>
      </el-table-column>
      <el-table-column label="车辆需求">
        <template slot-scope="scope">
          {{scope.row.trucksTypeName}} | {{scope.row.trucksLengthName}}
        </template>
      </el-table-column>
      <el-table-column prop="statusName" width="180" label="订单状态"></el-table-column>
    </el-table>
    <el-col :span="24" class="toolbar">
      <el-pagination
        :current-page="currentPage"
        :page-size="pageSize"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        layout="total,sizes,prev,pager,next,jumper"
        :total="total" style="float: right">
      </el-pagination>
    </el-col>
    <order-track-detail ref="orderTrackDetail"></order-track-detail>
    <truck-load-order-select-dialog
      :truckLoadModel="truckLoadModel"></truck-load-order-select-dialog>
  </div>
</template>

<script>
import { searchTruckLoadOrderStatistics, truckLoadOrderDataStatistics } from '../../api/truck-load/TruckLoadOrder.js';
import OrderTrackDetail from '../order/OrderTrackDetail.vue';
import TruckLoadOrderSelectDialog from '../truck_load_order/TruckLoadOrderSelectDialog.vue';

export default {
  name: 'TruckLoadOrderStatistics',
  components: {
    OrderTrackDetail, TruckLoadOrderSelectDialog
  },
  data: function () {
    return {
      truckLoadModel: '',
      condition: {
        'LIKE_truckLoadNumber': null,
        'LIKE_startContactName': null,
        'LIKE_cargoName': null
      },
      radio: 'lastweek',
      daterange: [],
      statistics: {
        totalOrders: null,
        insureOrders: null,
        insureOrderRatio: null,
        insureServiceCancelRatio: null,
        insurePrice: null,
        insureServicePrice: null,
        averageInsureRatio: null,
        insureDegressionPrice: null,
        grossProfit: null
      },
      currentPage: 1,
      pageSize: 10,
      total: 0,
      listLoading: false,
      truckLoadOrders: [],
      chartData: {
        columns: ['日期', '总订单数', '投保订单数', '投保订单占比'],
        rows: []
      },
      chartSettings: {
        axisSite: {right: ['投保订单占比']},
        yAxisType: ['KMB', 'percent'],
        yAxisName: ['票数', '比率']
      }
    };
  },
  watch: {
    radio (val) {
      if (val === 'lastweek') {
        this.lastWeek();
      } else if (val === 'week') {
        this.week();
      } else if (val === 'month') {
        this.month();
      } else {
        this.quarter();
      }
    }
  },
  methods: {
    openDialog (row, isDisabled) {
      this.truckLoadModel = JSON.stringify(Object.assign(row, {
        'isShow': true,
        'isDisabled': isDisabled,
        'time': Math.random()
      }));
    },
    search () {
      let filters = this.$ue.objToFilter(this.condition);
      filters += ';GTE_truckLoadOrderInsurances.policyEffect=' + this.daterange[0].toJSON() + ';LTE_truckLoadOrderInsurances.policyEffect=' + this.$ue.addDays(this.daterange[1], 1).toJSON();
      this.loadAllOrderInsurances(filters);
      this.loadStatistics(filters);
    },
    reset () {
      this.$ue.resetObjNull(this.condition);
    },
    handleSizeChange (size) {
      this.size = size;
      this.search();
    },
    handleCurrentChange (page) {
      this.page = page;
      this.search();
    },
    loadStatistics (filters) {
      truckLoadOrderDataStatistics({
        filters: filters
      }).then(res => {
        this.chartData.rows = res.data.latelyData;
        this.statistics = res.data;
      });
    },
    loadAllOrderInsurances (filters) {
      searchTruckLoadOrderStatistics({
        filters: filters,
        sort: 'createdDate,desc',
        page: this.currentPage - 1,
        size: this.pageSize
      }).then((res) => {
        this.truckLoadOrders = res.data;
        this.total = Number(res.headers['x-total-count']);
      });
    },
    lastWeek () {
      this.daterange = this.$ue.getLastWeek();
    },
    week () {
      this.daterange = this.$ue.getThisWeek();
    },
    month () {
      this.daterange = this.$ue.getThisMonthNew();
    },
    quarter () {
      this.daterange = this.$ue.getThisQuarterNew();
    }
  },
  mounted () {
    this.lastWeek();
    this.search();
  }
};
</script>
